<template>
  <div class="layout">
    <div class="layout__left">
      <ul>
        <li>
          <RouterLink to="/">首页</RouterLink>
        </li>

        <li>
          <RouterLink to="/list">列表页面</RouterLink>
        </li>
      </ul>
    </div>
    <div class="layout__right">
      <!-- 坑位，用于渲染 首页路由或列表页面路由 -->
      <RouterView />
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.layout {
  display: flex;
  width: 100%;
  height: 100%;
}

.layout__left {
  width: 200px;
  background-color: aquamarine;
}

.layout__right {
  flex: 1;
  background-color: green;
}
</style>
